<template>
	<div :class="rootClass">
		<div v-if="type" class="ui-message_icon">
			<UIIcon :icon="icon || type"></UIIcon>
		</div>
		<div class="ui-message_content">
			<p v-if="title" class="ui-message_title">{{title}}</p>
			<slot></slot>
		</div>
		<div v-if="showClose" class="ui-message_close" @click="close">
			<UIIcon icon="lulu_iconfont__close"></UIIcon>
		</div>
	</div>
</template>

<script setup>
	import { onMounted, ref, computed } from 'vue';
	import UIIcon from '@/ui/icon';

	const props = defineProps({
		type: {
			type: String,
			validator: v => ['success', 'info', 'warning', 'error', 'notice'].includes(v)
		},
		role: {
			type: String,
			default: 'message',
			validator: v => ['message', 'notification'].includes(v)
		},
		title: String,
		icon: String,
		showClose: Boolean
	});

	const emits = defineEmits(['close']);
	
	const rootClass = computed(() => {
		const cls = ['ui-message_inner', `is_${props.role}`];
		props.type && cls.push(`is_${props.type}`);
		return cls;
	})

	function close() {
		emits('close');
	}
</script>

<style lang="scss" scoped>
	
	.ui-message_inner {
		box-sizing: border-box;
		display: flex;
		align-items: flex-start;
		background: #ffffff;
		padding: 8px 16px;
		border-radius: 8px;
		box-shadow: 0 0 12px #e3e5e7;
		&.is_message {
			z-index: 8001;
			line-height: 20px;
			.ui-message_icon {
				font-size: 1em;
			}
			.ui-message_title {
				font-size: 1.1em;
				padding-bottom: 5px;
			}
		}
		&.is_notification {
			z-index: 8002;
			line-height: 24px;
			.ui-message_icon {
				font-size: 1.67em;
			}
			.ui-message_title {
				font-size: 1.2em;
				padding-bottom: .5px;
			}
		}
		@each $type, $color in ('info': rgb(149, 165, 166), 'notice': rgb(64, 158, 255), 'success': rgb(46, 204, 113), 'warning': rgb(255, 159, 26), 'error': rgb(255, 77, 77)) {
			&.is_#{$type} .ui-message_icon {
				color: $color;
			}
		}
	}
	
	.ui-message_title {
		margin: 0;
		font-weight: 700;
		letter-spacing: 2px;
	}

	.ui-message_content {
		flex: 1;
		color: #6e6e6e;
		text-align: justify;
	}

	.ui-message_icon {
		margin-right: 12px;
	}

	.ui-message_close {
		margin-left: 12px;
		color: #6e6e6e;
		cursor: pointer;
		font-size: .5em;
		transition: all .25s linear;
		transform-origin: center;
		&:hover {
			transform: rotate(90deg);
			color: #3d3d3d;
		}
	}
	
</style>